<!DOCTYPE HTML>
<html>
	<head>
		<title>JaxNav Lab</title>
		<style type="text/css">
			#container{
				width: 800px;
				margin: auto;
			}
			table{
				width: 100%;
				text-align: center;
			}
			a{
				color: #000;
				text-decoration: none;
			}
			a:hover{
				color: #1d6dff;
			}
			a.selected{
				color: #ab0500;
			}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
		<script src="http://github.com/cowboy/jquery-hashchange/raw/v1.3/jquery.ba-hashchange.min.js" type="text/javascript"></script>
		<script src="JS/jaxNav-lab.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#page').jaxNav({
					'One' : 'pages/one.php',
					'Two' : 'pages/two.php',
					'Three' : 'pages/three.php'
				}, {
					index : 'One',
					trans : function($oldPage, $newPage, done){
						$oldPage.fadeOut(200, function(){
							$newPage.fadeIn(200, function(){
								done();
							});
						});
					}
				}).pagechange(function(e){
					$('a').removeClass('selected').filter('[href=#'+e.page.name+']').addClass('selected');
				});
			});
		</script>
	</head>
	<body>
		<div id="container">
			<img src="images/logo.png" alt="logo" width="800" height="288" />
			<table border="0" cellspacing="0" cellpadding="8">
				<tr>
					<td><a href="#One">One</a></td>
					<td><a href="#Two">Two</a></td>
					<td><a href="#Three">Three</a></td>
				</tr>
				<tr>
					<td colspan="3" id="page"></td>
				</tr>
			</table>
		</div>
	</body>
</html>